<template>
  <a-card :bordered="false">
    <a-result :title="data.status | filterStatus(0)" :status="data.status | filterStatus(1)">
      <template #extra>
        <a-button type="primary" @click="toDetail">查看账单</a-button>
        <a-button style="margin-left: 8px" @click="toAdd">再来一单</a-button>
        <a-button @click="toList">账单列表</a-button>
      </template>
      <template #subTitle>
        <a-alert :type="data.status | filterStatus(1)" show-icon style="margin-top: 10px">
          <template slot="message">
            <span>{{ data.auditRemark | filterRemark }}</span>
          </template>
        </a-alert>
      </template>
      <div class="content">
        <div style="font-size: 16px; font-weight: 600; margin-bottom: 10px;">订单进度</div>
        <div style="font-size: 16px; font-weight: 600; margin-bottom: 20px;">订单号: {{ data.code }}</div>
        <a-steps :current="data.status === 2 ? 1 : 2" progressDot>
          <a-step title="生成订单">
            <template slot="description">
              <div>销售员: {{ data.salesPerson }}</div>
              <div>{{ data.saleTime }}</div>
            </template>
          </a-step>
          <a-step title="进行审批">
            <template slot="description">
              <div>审核员: {{ data.auditor }}</div>
              <div><a @click="handleHurry">催一下<a-icon style="margin-left: 4px; color: #00A0E9" type="dingding"/></a></div>
            </template>
          </a-step>
          <a-step title="审批完成">
            <template slot="description">
              <div>审批结果: <a-icon :type="data.status | filterStatus(2)" :style="data.status | filterStatus(3)"/></div>
              <div v-if="data.status !== 2">{{ data.auditTime }}</div>
            </template>
          </a-step>
        </a-steps>
      </div>
    </a-result>
  </a-card>
</template>

<script>
import { detail } from '@/api/sale'
import pick from 'lodash.pick'
import storage from 'store'

export default {
  name: 'SaleStep3',
  props: {
    saleCode: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      data: {}
    }
  },
  filters: {
    filterStatus (value, type) {
      if (value === 0) {
        return type === 0 ? '审核成功' : type === 1 ? 'success' : type === 2 ? 'check' : 'color: #52c41a'
      } else if (value === 1) {
        return type === 0 ? '审核失败' : type === 1 ? 'error' : type === 2 ? 'close' : 'color: #f5222d'
      } else {
        return type === 0 ? '正在审核' : type === 1 ? 'info' : type === 2 ? 'clock-circle' : 'color: #1890ff'
      }
    },
    filterRemark (value) {
      if (!value) {
        return '正在审核中, 请耐心等待 . . . .'
      } else {
        return '审核信息: ' + value
      }
    }
  },
  created () {
    this.getData(this.saleCode)
  },
  methods: {
    getData (saleCode) {
      const _this = this
      detail({
        saleCode: saleCode
      })
      .then(res => {
        _this.data = res.data
      })
      .catch(err => {
        _this.$message.error(err.response.data.msg || '获取数据失败')
      })
    },
    handleHurry () {
      if (this.data.status !== 2) {
        this.$message.info('已完成审批')
      } else {
        // send msg
      }
    },
    toDetail () {
      const saleDetail = pick(this.data, ['auditor', 'client', 'code', 'data',
      'money', 'saleRemark', 'salesPerson', 'saleTime'])
      storage.set('saleDetail', saleDetail)
      this.$emit('prevStep')
    },
    toAdd () {
      this.$emit('finish')
    },
    toList () {
      this.$router.push('/sale/saleManage')
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-result {
  padding: 20px;
  .ant-result-content {
    margin-top: 15px;
  }
  .ant-result-subtitle {
    text-align: left;
  }
}
</style>
